<template>
  <div>
    <h1>This is an about {{ title }}</h1>
    <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text"   v-model="title" class="layui-input"  @keydown.enter="add(title)">
    </div>
  </div>
    <table class="layui-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>内容</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in deletes" :key="index">
          <td>{{index}}</td>
          <td>{{item}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
// eslint-disable-next-line object-curly-newline
import { computed, defineComponent, reactive, ref } from 'vue';
import store from '@/store';

export default defineComponent({
  setup() {
    const title = ref('');
    return reactive({
      title,
      deletes: computed(() => store.state.deletes),
    });
  },
});
</script>

<style scoped>
</style>
